<template>
  <div class="app-container">
    <el-card class="box-card" style="margin-bottom:20px;">
    <div slot="header" class="clearfix">
      <span>专题档案</span>
      <el-button @click="handleCannel()" style="float: right; padding: 3px 0" type="text">返回</el-button>
    </div>
    <el-row>
      <el-col :span="12">专题名称：{{specialData.title}}</el-col>
      <el-col :span="12">专题状态：{{specialData.status.label}}</el-col>
    </el-row>
    <el-row>
      <el-col :span="24">专题备注：{{specialData.remark}}</el-col>
    </el-row>
    </el-card>
    <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>文章列表</span>
    <el-button style="float: right; padding: 3px 0" type="text" @click="getList()">刷新</el-button>
  </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="标题" max-width="400px">
        <template slot-scope="{row}">
          <span >{{ row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发行时间" class-name="status-col" width="160">
        <template slot-scope="{row}">
            {{ row.publishTime }}
        </template>
      </el-table-column>
      <el-table-column label="作者" class-name="status-col" width="160">
        <template slot-scope="{row}">
            {{ row.finishTime }}
        </template>
      </el-table-column>
      <el-table-column label="访问量" class-name="status-col" max-width="100">
        <template slot-scope="{row}">
            {{ row.viewNum }}
        </template>
      </el-table-column>
      <el-table-column label="状态" class-name="status-col" width="180">
        <template slot-scope="{row}">
            {{ row.status.label }}
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.start" :limit.sync="listQuery.perpage" @pagination="getList" />
</el-card>
  </div>
  
</template>

<script>
import { getSpecialDetail,getSpecialDocumentationList  } from '@/api/knowledge/special'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'knowledgeAdmin',
  components: { Pagination },
  directives: { waves },
  filters: {
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      specialData:{},
      listQuery: {
        start: 1,
        perpage: 10,
        specialID:0,
        keyword: undefined,
        sort: '+id'
      }
    }
  },
  created() {
    let specialID = this.$route.query && this.$route.query.specialID
    this.listQuery.specialID = specialID
    if (specialID !== undefined) {
      specialID = parseInt(specialID)
      if (!isNaN(specialID)) {
        this.listLoading = true
        getSpecialDetail({
          "specialID":specialID
        }).then(response => {
          if (response.status === 200) {
            this.listLoading = false
            this.specialData = response.data
            this.listQuery.keyword = this.specialData.keyword
            this.getList()
          } else {
            this.$message({
              message: response.msg,
              type: 'error'
            })
          }
        })
      }
    }
  },
  methods: {
    handleCannel:function(){
      this.$router.push({ path: 'special' })
    },
    getList() {
      this.listLoading = true
      getSpecialDocumentationList(this.listQuery).then(response => {
        this.list = response.data.list
        this.total = response.data.total

        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    handleShow:function(item){
    }
  }
}
</script>
